import React from 'react';
import styles from './style';
import { View, SafeAreaView, Image, Text, TouchableOpacity, DeviceEventEmitter } from 'react-native';
import * as Animatable from 'react-native-animatable';
import Back from '../../common/component/back';
import { FlatList } from 'react-native-gesture-handler';
import { getFocusList, userFocus, userUnfocus } from '../../common/api/userFocus';
import { defalutAvatar } from '../../util/constants';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { getUserInfo } from '../../common/api/user';
const avatar = require('../../common/img/head.jpg');
const scStart = require('../../common/img/scStart.png');
const scStart2 = require('../../common/img/scStart2.png');
export default class Fans extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            userInfo: {},
            listWhere: null,
        };
    }
    componentDidMount() {
        this.getData();
        this.getLoginUserInfo();
    }
    componentDidUpdate() {
        const { listWhere } = this.props.route.params;
        if (this.state.listWhere && listWhere !== this.state.listWhere) {
            this.getData();
            this.getLoginUserInfo();
        }
    }
    getLoginUserInfo = async () => {
        let userInfo = await AsyncStorage.getItem('userInfo');
        if (userInfo) {
            const parseUserInfo = JSON.parse(userInfo);
            if (parseUserInfo) {
                userInfo = parseUserInfo;
            }
        }
        userInfo = userInfo || (await getUserInfo());
        this.setState({ userInfo });
    };
    getData = async () => {
        const listWhere = this.props.route.params.listWhere;
        const res = await getFocusList(listWhere);
        this.setState({
            list: res,
            listWhere,
        });
    };
    _refreshMsssage = async item => {
        // let { list } = this.state;
        // const litItem = !list[index].currentUserIsFocus;
        // list[index].currentUserIsFocus = litItem;
        // this.setState({ list });
        // this.setState({ isPress: !csid });

        if (!item.currentUserIsFocus) {
            await userFocus(item._id);
        } else {
            await userUnfocus(item._id);
        }
        this.getData();
        // DeviceEventEmitter.emit('RefreshMineData');
    };
    render() {
        let { navigation, route } = this.props;
        let { list, userInfo } = this.state;
        let nameTitle = route.params.title;

        const rederItem = ({ item, index }) => {
            const uri = { uri: item.avatar || defalutAvatar };
            return (
                <View style={styles.fansStyle} key={item.id}>
                    <TouchableOpacity
                        onPress={() => {
                            userInfo._id !== item._id && navigation.navigate('SelfWork', { _id: item._id });
                        }}
                    >
                        <Animatable.View animation="slideInUp" style={[{ flexDirection: 'row' }]}>
                            <Animatable.Image source={uri} style={styles.fansImg} animation="rotate" />
                            <View style={styles.nameStyle}>
                                <Text style={styles.topText}>{item.nickname}</Text>
                                <Text style={styles.bottomText}>
                                    作品{item.photosCount} 粉丝 {item.fansCount}
                                </Text>
                            </View>
                        </Animatable.View>
                    </TouchableOpacity>

                    {userInfo._id !== item._id && (
                        <TouchableOpacity onPress={() => this._refreshMsssage(item)} style={styles.scStyle}>
                            <View
                                style={[
                                    styles.imgStyle,
                                    { backgroundColor: item.currentUserIsFocus ? 'rgb(246,176,30)' : '#000' },
                                ]}
                            >
                                <Animatable.Image
                                    source={item.currentUserIsFocus ? scStart2 : scStart}
                                    style={styles.imgSize}
                                    animation={item.currentUserIsFocus ? 'zoomIn' : ''}
                                    delay={item.currentUserIsFocus ? 300 : 0}
                                />
                            </View>
                        </TouchableOpacity>
                    )}
                </View>
            );
        };

        return (
            <SafeAreaView style={styles.fans}>
                <Back navigation={navigation} />
                <View>
                    <Text style={styles.fansText}>{nameTitle}</Text>
                </View>
                <FlatList data={list} keyExtractor={item => item._id} renderItem={rederItem} />
            </SafeAreaView>
        );
    }
}
